import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools,Icon,SearchBar } from 'weaver-mobile';
import { Comment,SearchAdvanced } from 'weaver-mobile-page';
import { renderIsTop } from '../../public';
import { compareParams } from '../../../util';
import RouteModal from '../../communication/RouteModal';

const getLabel = Tools.getLabel;
@withRouter
@inject('centerStore')
@observer
export default class Collect extends React.Component {

  static defaultProps = {
    prefixCls: 'cowork-center-collect',
  }

  constructor(props) {
    super(props);
    this.state = {
      path: props.location.pathname + '/detail',
      coworkId: '',
    }
  }
  
  componentDidMount() {
    const { centerStore: {collectStore} } = this.props;
    collectStore.getCoworkCollectShareCondition();
  }

  componentWillUnmount() {
    const { centerStore: {collectStore} } = this.props;
    collectStore.clear();
  }

  // 跳转详情页面
  toDetailPage = (e, data) => {
    e.stopPropagation();
    this.setState({coworkId: data.coworkId});
    this.props.history.push(`${this.state.path}?id=${data.coworkId}&&floor=${data.floorNum}`);
  }
  
  renderRightTop = (data) => {
    const { prefixCls } = this.props;
    const { centerStore: {collectStore} } = this.props;
    return (
      <div className={`${prefixCls}-renderRight`}>
        {data.isTop === '1' && renderIsTop}
        {
          data.cancollect === '1' && <span className={`${prefixCls}-renderRight-collect`} onClick={() => collectStore.coworkDiscussOperation(data,'','collect')}>
            {
              data.iscollect === '1' ? <Icon type='blog-concern-hot' color='#f77' size='xs' /> : <Icon type='blog-concern' color='#868686' size='xs'/>
            }
          </span>
        }
        <span className={`${prefixCls}-renderRight-floor`} onClick={(e) => this.toDetailPage(e, data)}>
        <a>#{data.floorNum}</a>
        </span>
      </div>
    )
  }

  renderTopDefine = (data) => {
    const { prefixCls } = this.props;
    return (
      <div className={`${prefixCls}-topDefine`}>
        {getLabel(83258,'相关主题')}：
       <a onClick={() => this.props.history.push(`${this.state.path}?id=${data.coworkId}`)}>{data.coworkName}</a>
      </div>
    )
  }

  render(){
    const { prefixCls, centerStore: { collectStore } } = this.props;
    const { collectList, onCollectSearch, doCollectReset, setStoreState, collectAdValue, updateCollectAdvance, collectSearch } = collectStore;
		//const { getCollectComment } = collectStore;
    const buttonGroupData = [
      { key: 'reset',
        text: getLabel(2022,"重置"),
        onClick: doCollectReset
      },
      { key: 'submit',
        text: getLabel(826,"确定"),
        onClick: () => {
          // getCollectComment();
          collectSearch();
          this.props.history.go(-1);
        },
        type: 'primary',
      }
    ];
    let compare = true;
    if (onCollectSearch) {
      compare = compareParams(toJS(onCollectSearch.form.formData), toJS(onCollectSearch.form.defaultValues));
    }
    const adType = compare ? 'filter-o' : 'filter-o-hot';

    return (
      <div className={prefixCls}>
        <SearchBar 
          placeholder={getLabel(390678,'请输入发表内容')}
          value={collectAdValue}
          showExtraButton
          extraButton={[
            { key: 'advanced', show: <Icon key={adType} type={adType} /> },
          ]}
          onExtraButtonClick={() => this.props.history.push(onCollectSearch.path)}
          onChange={val => updateCollectAdvance(val)}
          onSubmit={collectSearch}
        />
        <SearchAdvanced
          store={onCollectSearch}
          buttonGroupData={buttonGroupData}
          onChange={(condition, value) => {if(condition.domkey[0] === 'remark') { setStoreState({ collectAdValue: value }); }}}
        />
        <Comment
          store={collectList}
          renderRightTop={this.renderRightTop}
          renderTopDefine={this.renderTopDefine}
        />
        <RouteModal/>
      </div>
    );
  }
}